import React, { useRef, FC ,useState ,useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import MyTable from '@/components/common/table'
import Metric from '@/api/metric'
import { Input } from 'antd';
import MySelect from '@/components/common/mySelect'
import MyDefineSelect from '@/components/common/myDefineSelect'
import { DatePicker } from 'antd';
import ChooseUserGroupCom from '@/components/common/chooseGroup'
import moment from 'moment';
const RoleList: FC = () => {
  const tableRef: RefType = useRef()
  const [themeCodeList,setthemeCodeList] = useState([]);
  //日期
  const [periodId,setperiodId] = useState('');
  //组织
  const [orgCode,setorgCode] = useState('');
  const [orgName,setorgName] = useState('');
  const ChooseUserGroupRef: RefType = useRef()

  useEffect(()=>{
    Metric.themeList().then((res)=>{
      console.log(res);
      let themeCodeListNew:any = res.data?res.data:[];
      themeCodeListNew.map((e,i)=>{
        themeCodeListNew[i]['name'] = e['themeName'];
        themeCodeListNew[i]['key'] = e['themeId'];
        return 1;
      })
      setthemeCodeList(themeCodeListNew);
    })
  },[])
  const searchConfigList = [
    {
      key: 'themeId',
      slot: (
        <MySelect
          data={themeCodeList}
          placeholder="请选择主题"
          
        />
      ),
      initialValue: '1'
    },
    {
      key: 'measureName',
      slot: <Input placeholder="请输入指标名称" allowClear />,
      rules: [],
      initialValue: ''
    },
    {
      key: 'measureCode',
      slot: <Input placeholder="请输入指标编码" allowClear />,
      rules: [],
      initialValue: ''
    }, 
    {
      key: 'orgCode',
      slot: <div className="" style={{cursor:'pointer'}} onClick={()=>{
        ChooseUserGroupRef.current.init();
      }}>
         <Input value={orgName} placeholder="请选择组织"/>
      </div>,
      rules: [],
      initialValue: ''
    }, 
    {
      key: 'periodId',
      slot: <div><DatePicker picker="month" onChange={(date, dateString)=>{
        setperiodId(dateString);
      }} value={periodId&&moment(periodId,'YYYY-MM')}/></div>,
      rules: [],
      initialValue: '',
      // fn:(val)=>{
      //   console.log(val);
      //   return periodId?moment(periodId).format('YYYYMM'):''
      // }
    }, 
    {
      key: 'industryCode',
        slot: <MyDefineSelect 
        url="/dm/api/baseinfo/industry/query"
        namekey="industryName"
        idkey="industryCode"
        requestMethod="post"
        placeholder="请选择行业"
        formatIdKey={(key)=>{return Number(key)}}
      />,
      rules: [],
      initialValue: ''
    }, 
    // {
    //   key: 'measureCategory',//指标类别
    //   slot: <MyDefineSelect 
    //     url="/dm/api/metric/define/measure-category"
    //     namekey="name"
    //     idkey="id"
    //     requestMethod="get"
    //     formatIdKey={(key)=>{return Number(key)}}
    //   />,
    //   rules: [],
    //   initialValue: ''
    // },
    // {
    //   key: 'measureType',//指标类型
    //   slot: <MyDefineSelect 
    //   url="/dm/api/metric/define/measure-type"
    //   namekey="name"
    //   idkey="id"
    //   requestMethod="get"
    //   formatIdKey={(key)=>{return Number(key)}}
    // />
    // },
    


   
  ];
  const columns = [
    {
      title: '名称',
      dataIndex: 'measureName',
    },
    
    {
      title: '日期',
      align: 'center',
      dataIndex: 'periodId',
    },
    {
      title: '组织',
      dataIndex: 'orgName',
    },
    {
      title: '产业',
      dataIndex: 'industryName',
    },
    {
      title: '场景',
      dataIndex: 'senarioName',
    },
    {
      title: '区域',
      dataIndex: 'regionName',
    },
    {
      title: '指标维度',
      dataIndex: 'extendName',
    },
    {
      title: '指标编码',
      dataIndex: 'measureCode',
    },
    {
      title: '指标值',
      align: 'right',
      dataIndex: 'measureValue',
    }
   
  ]
  return (
    <> 
      <MyTable
        searchConfigList={searchConfigList}
        apiFun={Metric.metricDataList}
        columns={columns}
        ref={tableRef}
        expendParams={{ periodId: periodId?moment(periodId).format('YYYYMM'):'',orgCode:orgCode }}
      />
      <ChooseUserGroupCom ref={ChooseUserGroupRef} callback={(callback_v)=>{
          let obj = callback_v[0];
          console.log(obj);
          setorgCode(obj['id']);
          setorgName(obj['name']);
      }}/>
    </>
  )
}
export default withRouter(RoleList)
